<template>
	<z-paging ref="paging" :refresher-out-rate="0.8" :to-bottom-loading-more-enabled="false"
		:show-empty-view-reload-when-error="false" :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
		empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
		empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
		empty-view-error-text="暂无数据" safe-area-inset-bottom bg-color="#FFF" v-model="dataList" @query="queryList">
		<view class="card">
			<!-- 名片部分 -->
			<view class="card_detail">
				<view class="adviser_detail">
					<u-text :text="cardFormList.deptName || '--'" color="#FFFFFF" size="28rpx" margin="0 0 0 32rpx" />
					<view class="adviser_info">
						<view>
							<u-text :text="cardFormList.salesmanName || '--'" color="#333" size="40rpx" bold />
							<u-text :text="cardFormList.postName || '--'" color="#666" size="26rpx"
								margin="4rpx 0 0 0" />
						</view>
						<image class="adviser_info_img" :src="cardFormList.avatar || MissingAvatar" mode=""></image>
					</view>
					<view class="card_details">
						<u-icon name="/static/images/card/phone.png" size="24rpx" space="12rpx" labelColor="#fff"
							labelSize="24rpx" :label="cardFormList.contactPhone || '--'" />
						<u-gap height="12rpx"></u-gap>
						<u-icon name="/static/images/card/email.png" size="24rpx" space="12rpx" labelColor="#fff"
							labelSize="24rpx" :label="cardFormList.email || '--'" />
						<u-gap height="12rpx"></u-gap>
						<view style="display: flex; align-items: center">
							<image src="../../static/images/card/address.png" style="
                                    width: 24rpx;
                                    height: 24rpx;
                                    margin-right: 12rpx;
                                "></image>
							<view style="
                                    width: 600rpx;
                                    color: #fff;
                                    word-break: normal;
                                ">{{
                                    cardFormList.province +
                                        cardFormList.city +
                                        cardFormList.county +
                                        cardFormList.detailedAddress || "--"
                                }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 个人简介 -->
			<view class="enterprise_details">
				<view class="enterprise_top">
					<text class="enterprise_bg"></text>
					<u-text text="个人简介" size="32rpx" bold />
				</view>
				<view class="enterprise_t">{{
                    cardFormList.resume || "暂无简介"
                }}</view>
			</view>
			<!-- 公司介绍名片分享 -->
			<view class="nav_info">
				<!-- <view class="to_enterprise" @click="to_enterprise()">公司介绍</view> -->
				<button class="to_share" open-type="share">分享名片</button>
			</view>
			<!-- 拨打电话 -->
			<view class="call_info">
				<view class="call_infos" @click="to_call">
					<view class="to_call">
						<u-icon
							name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/8315385cc2054861a609f0c1c677f5cf.png"
							size="108rpx" />
						<u-text text="拨打电话" size="32rpx" bold color="#3D3D3D" margin="0 36rpx" />
					</view>
					<u-icon name="arrow-right" color="#FF9000 " width="4rpx" height="36rpx"></u-icon>
				</view>
			</view>
			<!-- 名片分享 -->
			<!-- <u-popup
                :show="show"
                mode="bottom"
                @close="close"
                :overlayOpacity="overlayOpacity"
            >
                <view style="height: 212rpx">
                    <view
                        style="
                            padding: 28rpx 28rpx 0 0;
                            display: flex;
                            justify-content: flex-end;
                        "
                        @click="close"
                    >
                        <u-icon name="close" color="#999999" size="13" />
                    </view>
                    <view
                        style="
                            margin-top: 6rpx;
                            display: flex;
                            justify-content: space-around;
                        "
                    >
                        <button
                            style="
                                border: 0;
                                outline: none;
                                font-size: 26rpx;
                                background-color: #fff;
                                margin: 0;
                                padding: 0;
                            "
                            open-type="share"
                        >
                            <u-icon
                                name="/static/images/card/weixin.png"
                                size="40"
                                label="分享给微信好友"
                                labelPos="bottom"
                                space="10"
                            />
                        </button>
                        <u-icon
                            name="/static/images/card/card_p.png"
                            size="40"
                            label="生成名片海报"
                            labelPos="bottom"
                            space="10"
                            @click="to_cardPoster"
                        />
                    </view>
                </view>
            </u-popup> -->
			<!-- 拨打电话 -->
			<u-popup :show="tel_show" mode="bottom" @close="tel_close" :round="10">
				<u-gap height="32rpx" />
				<u-text text="复制号码" size="34rpx" align="center" @click="savePhone" />
				<u-gap height="32rpx" />
				<u-line></u-line>
				<u-gap height="32rpx" />
				<u-text text="呼叫手机" size="34rpx" align="center" @click="contact" />
				<u-gap height="32rpx" />
				<u-gap height="14rpx" bgColor="#F5F5F5" />
				<u-gap height="32rpx" />
				<u-text text="取消" size="34rpx" align="center" @click="tel_close" />
				<u-gap height="32rpx" />
			</u-popup>
			<u-gap height="14rpx" bgColor="#F5F5F5;"></u-gap>
			<!-- 其他顾问 -->
			<view class="else_enterprise">
				<view class="to_call">
					<u-icon name="/static/images/card/else.png" size="64rpx" />
					<u-text text="名片列表" size="36rpx" bold color="#333333" margin="0 16rpx" />
				</view>
				<view v-for="(item, index) in dataList" :key="index" @click="toAdvisor" :data-id="item.salesManId">
					<view class="adviser_else">
						<view>
							<u-text :text="item.salesmanName" color="#333" size="40rpx" bold margin="4rpx 0 0 0" />
							<u-text :text="item.postName" color="#666" size="26rpx" />
						</view>
						<view class="el_adviser_info_info">
							<image class="el_adviser_info_img" :src="item.avatar || MissingAvatar" mode=""></image>
							<u-icon name="arrow-right" color="#588BF3 " width="4rpx" height="36rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {
		tenantCard,
		appIdCard,
		userCard
	} from "@/api/card";
	import {
		mapGetters
	} from "vuex";
	import {
		consultant
	} from "@/api/sign_in.js";
	export default {
		data() {
			return {
				overlayOpacity: "0.5",
				MissingAvatar: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/a47e1978c93748b4b42aee21b7cf3d93.png",
				dataList: [1, 2, 3, 4, 5],
				signBoxCustomStyle: {
					width: "100vw",
					height: "",
				},
				show: false,
				tel_show: false,
				list: [],
				cardFormList: {},
				phoneNumber: "",
			};
		},
		computed: {
			...mapGetters(["isLogin"]),
		},
		onShow() {
			const appId = uni.getAccountInfoSync().miniProgram.appId;
			this.appId = appId;
			this.getAppIdCard(this.appId);
		},
		methods: {
			//发送给朋友
			onShareAppMessage(res) {
				return {
					title: "HI!我向您推荐了" +
						this.cardFormList.salesmanName +
						"的智能名片",
					path: "/pages_card/user_card/index?salesmanId=" + this.id,
				};
			},
			to_share() {
				if (this.cardFormList == "") {
					uni.$u.toast("暂无名片，不支持分享！");
				} else {
					this.show = true;
				}
			},
			close() {
				this.overlayOpacity = "0.5";
				this.show = false;
			},
			to_call() {
				if (
					this.cardFormList == "" ||
					this.cardFormList.contactPhone == ""
				) {
					uni.$u.toast("暂无手机号，不支持拨打电话！");
					return;
				} else {
					this.tel_show = true;
				}
			},
			savePhone() {
				let data = this.cardFormList.contactPhone;
				uni.setClipboardData({
					data: data,
					success: (res) => {
						uni.showToast({
							title: "已复制",
							duration: 2000,
						});
					},
				});
			},
			tel_close() {
				this.tel_show = false;
			},
			contact() {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: this.cardFormList.contactPhone,
					// 成功回调
					success: (res) => {},
					// 失败回调
					fail: (res) => {},
				});
			},
			async getAppIdCard(appId) {
				//获取appid拿到tendid
				const res = await appIdCard(appId);
				this.tenantId = res.data;
				this.getTenantCard(this.tenantId);
			},
			async getTenantCard(tenantId) {
				//根据tenantid拿到业务员id
				const res = await tenantCard(tenantId);
				this.id = res.data;
				if (this.id == "") {
					this.cardFormList = "";
				} else {
					this.getBusinessCard(this.id);
				}
			},
			async getBusinessCard(id) {
				//获取名片信息
				const res = await userCard(id);
				this.cardFormList = res.data;
				this.id = res.data.id;
			},
			// to_enterprise() {
			// 	uni.navigateTo({
			// 		url: "/pages_card/enterprise/index?tenantId=" + this.tenantId,
			// 	});
			// },
			to_addWechat() {
				if (
					this.cardFormList.wechatQrCode == "" ||
					this.cardFormList.wechatQrCode == null
				) {
					uni.$u.toast("未上传微信二维码！");
					return;
				} else {
					uni.navigateTo({
						url: "/pages_card/add_wechart/index?wechatQrCode=" +
							this.cardFormList.wechatQrCode,
					});
				}
			},
			toAdvisor(e) {
				let id = e.currentTarget.dataset.id;
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages_card/user_card/index?salesmanId=" + id,
					});
				}, 500);
			},
			queryList(pageNo, pageSize) {
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
				};
				consultant(params)
					.then((res) => {
						const rows = res.data.filter(
							(item) =>
							item.salesmanName !== this.cardFormList.salesmanName
						);
						this.$refs.paging.completeByNoMore(rows, false);
					})
					.catch(() => {
						this.$refs.paging.complete(false);
					});
			},
		},
	};
</script>

<style>
	.card {
		background: #ffffff;
		width: 100%;
		/* height: 100vh; */
		color: #ffffff;
	}

	.card_detail {
		padding: 40rpx 28rpx 32rpx;
	}

	.adviser_detail {
		border-radius: 28rpx;
		padding: 12rpx 0 36rpx;
		background: linear-gradient(315deg, #8aa0c5 0%, #8198c1 100%);
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.2);
	}

	.adviser_info,
	.adviser_else {
		display: flex;
		align-items: center;
		margin-top: 12rpx;
		padding: 0 32rpx;
		height: 146rpx;
		background: linear-gradient(135deg,
				#deebf9 0%,
				rgba(255, 255, 255, 0) 100%);
		color: #333;
		justify-content: space-between;
	}

	.adviser_else {
		margin: 20rpx 0 30rpx;
	}

	.adviser_info_img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	/* 名片电话地址 */
	.card_details {
		padding: 36rpx 32rpx 0;
		font-size: 24rpx;
	}

	/* 导航部分 */
	.nav_info {
		display: flex;
		text-align: center;
		justify-content: space-between;
		padding: 40rpx 28rpx 0 32rpx;
		font-size: 32rpx;
	}

	.to_enterprise {
		width: 172rpx;
		height: 90rpx;
		border-radius: 8rpx;
		border: 2rpx solid #588bf3;
		color: #588bf3;
		line-height: 90rpx;
		font-weight: 500;
	}

	.to_share {
		width: 478rpx;
		height: 90rpx;
		background: #588bf3;
		border-radius: 8rpx;
		color: #ffffff;
		line-height: 90rpx;
	}

	.call_info {
		padding: 40rpx 28rpx 40rpx 32rpx;
	}

	.call_infos {
		height: 132rpx;
		background: #fffbf1;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 36rpx;
	}

	.to_call {
		display: flex;
	}

	/* 个人介绍 */
	.enterprise_details {
		padding: 0 20rpx 0 40rpx;
		color: #333;
	}

	.enterprise_top {
		display: flex;
		height: 44rpx;
		align-items: center;
	}

	.enterprise_bg {
		display: block;
		width: 8rpx;
		height: 28rpx;
		background: #588bf3;
		margin-right: 8rpx;
	}

	.enterprise_t {
		color: #666;
		font-size: 26rpx;
		margin-top: 24rpx;
	}

	/* 其他顾问 */
	.else_enterprise {
		padding: 32rpx 28rpx;
	}

	.el_adviser_info_info {
		display: flex;
		align-items: center;
	}

	.el_adviser_info_img {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin: 0 20rpx;
	}

	button::after {
		border: none;
		border-radius: 0;
	}
</style>
